<template>
  <a-modal width="600px" v-drag centered :destroyOnClose="true" :maskClosable="false" :visible="visible"
    :bodyStyle="{ padding: '1px' }" title="流程处理" @cancel="cancel">
    <div style="padding: 10px">
      <a-spin :spinning="spinning">
        <a-card :hoverable="true" size="small" v-for="(item, index) in person" :key="index" :title="item.activity.title">
          <a-checkbox-group v-model="form.person" v-if="item.persons.length > 0 && item.persons[0].pattern == '1'">
            <a-row>
              <a-col :span="24" v-for="(pitem, pindex) in item.persons" :key="pindex">
                <a-checkbox :value="pitem.userId">
                  {{ pitem.name }}
                </a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>

          <a-radio-group v-model="form.person" v-if="item.persons.length > 0 && item.persons[0].pattern != '1'">
            <a-row>
              <a-col :span="24" v-for="(pitem, pindex) in item.persons" :key="pindex">
                <a-radio :value="pitem.userId">
                  {{ pitem.name }}
                </a-radio>
              </a-col>
            </a-row>
          </a-radio-group>
        </a-card>
        <a-card style="margin-top: 4px" size="small" title="通知类型" :hoverable="true" v-if="notice.length > 0">
          <a-checkbox-group v-model="form.notice">
            <a-row>
              <a-col :span="24" v-for="(item, index) in notice" :key="index">
                <a-checkbox :value="index">
                  {{ item.remark }}
                </a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>
        </a-card>
      </a-spin>
    </div>

    <template slot="footer">
      <a-space>
        <a-button key="back" @click="cancel" :disabled="loading"><a-icon type="close" />取消</a-button>
        <a-button key="submit" @click="save" type="primary" :loading="loading"><a-icon type="save" />提交</a-button>
      </a-space>
    </template>
  </a-modal>
</template>
  
<script>
export default {
  name: "start",
  data() {
    return {
      config: {
        labelCol: { span: 4 },
        wrapperCol: { span: 18 },
      },
      form: {
        notice: [],
        person: [],
      },
      radioStyle: {
        display: "block",
        height: "30px",
        lineHeight: "30px",
      },
      loading: false,
      spinning: false,
    };
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
    },

    notice: {
      type: Array,
    },
    person: {
      type: Array,
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    /**
     *初始化通知
     */
    init() {
      let that = this;
      for (let index = 0; index < that.notice.length; index++) {
        that.form.notice.push(index);
      }
    },

    /**
     * 关闭
     */
    cancel() {
      this.$emit("update:visible", false);
    },

    /**
     * 保存
     */
    save() {
      let that = this;
      this.$emit("comfirm", that.form);
    },
  },
};
</script>
  
<style lang="less" scoped></style>